<template>
    <div class="in">
        <div class="search_1">
            <input v-model="val" type="text" @focus="Search_records != '' ?  Search_status = true : Search_status = false" @blur="Lose_focus">
            <div class="tex" v-show="Search_status">
                <div class="tex2">
                    <div class="po1">最近搜索</div>
                    <div class="po2" @click.stop="empty">清空</div>
                </div>
                <!-- <div class="po3" v-for="i in Search_records" :key="i" @click="obtain(i)">{{i}}</div> -->
                <div class="po3" v-for="it,i in Search_records" :key="i" @click="obtain(it)">{{it}}</div>
            </div>
        </div>
        <div class="search_2" @click="search">搜索</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            Search_records: [],
            Search_status: false,
            val: ''
        }
    },
    mounted() {
        
    },
    watch: {
        // val() {
        //     console.log(this.val);
        // }
    },
    methods: {
        Lose_focus() {
            // console.log('失去啦');
            // setInterval
            setTimeout(() => {
                this.Search_status = false
            }, 100)
        },
        search() {
            if(this.val !== '') {
                this.Search_records.push(this.val)
                this.Searchstatus = false
                this.$router.push({
                    path: '/Searchpage',
                    query: {
                        val: this.val
                    }
                })    
            }
            // console.log('搜索啦');
        },
        empty() {
            this.Search_records = []
            // console.log('清空啦');
        },
        obtain(i) {
            this.val = i
            if(this.val !== '') {
                this.Search_records.push(this.val)
                this.Searchstatus = false
                this.$router.push({
                    path: '/Searchpage',
                    query: {
                        val: this.val
                    }
                })    
            }
            // console.log('赋值啦');
        }
    }
}
</script>

<style lang="less" scoped>
    .in {
        pointer-events: auto;
        border-radius: 5px;
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        .search_1 {
            // margin-top: 20px;
            position: relative;
            padding: 10px;
            height: 38px;
            display: flex;
            align-items: center;
            background-color: white;
            input {
                width: 150px;
                border: none;
                outline: none;
            }
            .tex {
                // border: 1px solid red;
                position: absolute;
                background-color: white;
                margin-top: 120px;
                margin-left: -10px;
                border-radius: 5px;
                width: 100%;
                // border: 1px solid red;
                display: flex;
                flex-wrap: wrap;
                // display:none
                .tex2 {
                    // border: 1px solid red;
                    width: 100%;
                    padding: 5px;
                    font-size: 10px;
                    display: flex;
                    justify-content: space-between;
                    .po1 {
                        color: #999;
                    }
                    .po2 {
                        // border: 1px solid red;
                        color: #00c3ff;
                        cursor: pointer;
                    }
                }
                .po3:hover {
                    background-color: rgb(247, 247, 247);
                }
                .po3 {
                    // border: 1px solid red;
                    width: 100%;
                    padding: 5px;
                    cursor: pointer;
                }
            }
        }
        .search_2 {
            // border: 1px solid red;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ffe14c;
            border-radius: 0px 5px 5px 0px;
            cursor: pointer;
        }
    }
</style>